<template>
    <div>
        <a-form :form="form">
            <div class="header">
                <h3>一、基本信息</h3>
                <div class="operate">
                    <div>
                        <transition name="slide-fade">
                            <a-button type="primary" @click="handleReduce" v-show="!disabled">还原默认</a-button>
                        </transition>
                        <a-button type="primary" v-if="disabled" @click="handleShowEdit">修改</a-button>
                        <a-button type="primary" @click="handleEdit" v-else>保存修改</a-button>
                    </div>
                </div>
            </div>
            <a-form-item label="巡检名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-if="!disabled" placeholder="巡检名称" v-decorator="[
                    'name',
                    {
                        initialValue: check.name,
                        rules: [
                            { required: true, message: '请输入巡检名称' },
                        ],
                    }
                ]"/>
                <div v-else>{{check.name}}</div>
            </a-form-item>
            <a-form-item label="价格" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-if="!disabled" placeholder="价格" v-decorator="[
                    'price',
                    {
                        initialValue: check.price,
                        rules: [
                            {
                                validator: function(rule, value, callback){
                                    if(!value){
                                        callback('请输入价格');
                                    }
                                    if(isNaN(Number(value))){
                                        callback('请输入数字');
                                    }
                                    if(value < 0){
                                        callback('请勿填入负数');
                                    }
                                    callback()
                                }
                            }
                        ]
                    },
                ]"/>
                <div v-else>{{check.price}}</div>
            </a-form-item>
            <a-form-item label="巡检类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select v-if="!disabled" placeholder="请选择巡检类型" v-decorator="[
                    'type',
                    {
                        initialValue: (check.type)
                    }
                ]">
                    <a-select-option v-for="v in cateList" :key="v.id" :value="v.id">
                        {{v.label}}
                    </a-select-option>
                </a-select>
                <div v-else>{{cateList.find(f => f.id === check.type) ? cateList.find(f => f.id === check.type).label : '暂无'}}</div>
            </a-form-item>
            <a-form-item label="最小单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-if="!disabled" placeholder="请输入最小单位" v-decorator="[
                    'unit',
                    {
                        initialValue: check.unit,
                        rules: [
                            { validator: (rule, val, callback) => {
                                if(!val){
                                    callback('请输入最小单位');
                                }
                                if(isNaN(Number(val))){
                                    callback('请输入数字');
                                }
                                if(val <= 0){
                                    callback('请输入大于0的数字');
                                }
                                callback()
                            }}
                        ]
                    }
                ]"/>
                <div v-else>{{check.unit}}</div>
            </a-form-item>
            <a-form-item label="图片" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <div>
                    <span v-if="!Boolean(imgUrl)">暂无视频</span>
                    <img v-else :src="imgUrl" alt="" width="300" height="200">
                </div>
                <a-upload
                    v-if="!disabled"
                    name="file"
                    :showUploadList="false"
                    :multiple="false"
                    :customRequest="this.handleUploadImage"
                >
                    <a-button type="primary"> <a-icon type="upload" />点击上传</a-button>
                </a-upload>
            </a-form-item>
            <a-form-item label="视频" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <div>
                    <span v-if="!Boolean(url)">暂无视频</span>
                    <video 
                        v-else
                        :src="url"
                        width="300"
                        height="200"
                        controls="controls"
                    >
                        您的浏览器不支持 video 标签。
                    </video>
                </div>
                <a-upload
                    v-if="!disabled"
                    name="file"
                    :showUploadList="false"
                    :multiple="false"
                    :customRequest="this.handleUploadVideo"
                >
                    <a-button type="primary"> <a-icon type="upload" />点击上传</a-button>
                </a-upload>
            </a-form-item>
        </a-form>
    </div>
</template>

<script>
    import config from '@/api/config'

    export default {
        name: "check-update",
        data(){
            return {
                check: {},
                disabled: true,
                cateMap: {},

                form: this.$form.createForm(this),
                cateList: [
                    {id: 1, label: '点(核算单位：每点*8h)'},
                    {id: 2, label: '线(核算单位：公里)'},
                    {id: 3, label: '面(核算单位：平方公里)'},
                ],
                labelCol:{ lg: {span: 7}, sm: {span: 7} },
                wrapperCol:{ lg: {span: 10}, sm: {span: 17} },
                url: "",
                imgUrl: ""
            }
        },
        methods: {
            async getDetail(id){
                let { data } = await this.http(
                    "get",
                    `/inspection/view/${id}`
                )
                this.check = data || {}
                this.imgUrl = this.check.image
                this.url = this.check.video
            },

            handleShowEdit(){
                this.disabled=false
            },

            handleEdit(){
                this.form.validateFields(async (err, values) => {
                    if(!err){
                        console.log("values:", values, this.url)
                        values.video = this.url || this.check.video
                        values.image = this.imgUrl || this.check.image
                        values.id = this.check.id
                        let { status, message } = await this.http('post', '/inspection/update', values)
                         if(status === 1){
                            this.$message.success('修改成功', 1);
                            await this.getDetail(this.$route.params.id)
                            this.disabled = true
                         }else{
                             this.$message.error(message, 1);
                         }
                    }
                })
            },

            handleReduce(){
                let { name, price, type, unit, image, video } = this.check
                this.form.setFieldsValue({
                    name, price, type, unit
                })
                this.imgUrl = image
                this.url = video
                this.disabled=true
            },
            async handleUploadImage(args){
                let params = new FormData();
                params.append("uploadFile", args.file);
                let { data: {filePath}} = await this.http("post",config.uploadURL,params)
                this.imgUrl = filePath
                return args.onSuccess({code:200}, args.file);
            },
            async handleUploadVideo(args){
                let params = new FormData();
                params.append("uploadFile", args.file);
                let { data: {filePath}} = await this.http("post",config.uploadURL,params)
                this.url = filePath
                return args.onSuccess({code:200}, args.file);
            }
        },
        async mounted(){
            await this.getDetail(this.$route.params.id)
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    @import "../../assets/scss/mixin";

    .header {
        @include fj();
        margin-bottom: 30px;
        .operate {
            .ant-btn + .ant-btn {
                margin-left: 40px;
            }
        }
    }

    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    .slide-fade-leave-active {
        transition: all .3s ease;
    }
    .slide-fade-enter, .slide-fade-leave-to {
        transform: translateX(20px);
        opacity: 0;
    }
    /deep/ .ant-upload-list-item-card-actions {
        .anticon-delete{
            color: #FFF;
        }
    }
</style>